<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<meta charset="UTF-8">
<title>群组选择控件</title>

<link rel="stylesheet" href="/css/vendor/common.css" type="text/css">
<link rel="stylesheet" href="/css/vendor/cmp-controls.css" type="text/css">
</head>

<body>
	<!--	显示列表内容等 	-->
	<p style="width: 100%; height: 400px; text-align: center; font-size: 22.0rem; position: absolute; left: 0;right: 0; top: 0;bottom: 0; margin: auto; opacity: 0.1;">SHOW</p>
</body>

<script src="/js/jquery-3.2.1.min.js"></script>
<script src="/js/vendor/common.js"></script>
<script src="/js/vendor/cmp-controls.js"></script>

<script>

	// 测试代码
	var srcList = new Array();
	for (var i = 0; i < 16; i++) {
		var num = (15106317456 + i) + "";
		// icon不传就是默认头像
		var item = {//icon:"/images/group-select/group_selcet_head_icon.png",
				   uid:num,
				   checked:(i%2==0),
				   role:((i%2==0) ? {id: 0, name:"管理员"}:undefined)};
		srcList.push(item);
	}
	
	var roleList = [{id: 0, name:"管理员"},
				   	{id: 1, name:"普通用户"},
				   	{id: 2, name:"特权用户"},];
    var option = {
        srcTitle: "选择要添加的T",
        destTitle: "已选择联系人T",
        selectedUnit: "架飞机T",
        comfirm: "更 新T",
        cancel: "取 消T",
    }

    // 如果不设置角色选项,则角色选项不可见
    groupSelcetM.init(option)
                .updateRoleList(roleList)
                .updateSrcList(srcList);
	groupSelcetM.filterSrcDataCallback = function(value) {
		alert("过滤源数据: "+value);
		// 更新过滤后的数据
		// groupSelcetM.updateSrcList(srcList);
	};
	groupSelcetM.cancelCallback = function() {
		alert("点击了取消");
	};
	groupSelcetM.confirmCallback = function(list) {
		alert("点击了确定 已选择 "+list.length+" 项");	
	};
	
</script>

</html>






